<template>
    <div class="edit">
        <!-- Header Start -->
        <el-card shadow="never" class="!border-none">
            <el-page-header
                v-if="pageType == 1"
                :content="id ? '编辑图文目录' : '新增图文目录'"
                @back="$router.back()"
            />
            <el-page-header
                v-if="pageType == 2"
                :content="id ? '编辑音频目录' : '新增音频目录'"
                @back="$router.back()"
            />
            <el-page-header
                v-if="pageType == 3"
                :content="id ? '编辑视频目录' : '新增视频目录'"
                @back="$router.back()"
            />
            <el-page-header
                v-if="pageType == 4"
                :content="id ? '编辑专栏目录' : '新增专栏目录'"
                @back="$router.back()"
            />
        </el-card>
        <!-- Header End -->

        <!-- Main Start -->
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
            <el-card shadow="never" class="!border-none" style="margin-top: 15px">
                <el-form-item label="目录名称:" prop="name">
                    <el-input
                        class="ls-input"
                        v-model="formData.name"
                        placeholder="请输入目录名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="视频封面:" v-if="pageType == 3">
                    <div>
                        <material-select
                            v-model="formData.cover"
                            :type="'image'"
                            :limit="1"
                        ></material-select>
                        <div class="form-tips">
                            封面是指进入视频未播放时展示的图片，建议尺寸750*400px
                        </div>
                    </div>
                </el-form-item>
                <el-form-item v-if="fee_type" :label="pageType == 2 ? '免费试听' : '免费试看'">
                    <div>
                        <el-radio-group v-model="formData.feeType">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1" :disabled="!fee_type">否</el-radio>
                        </el-radio-group>
                        <div class="form-tips">默认为否，选择是，则用户可免费观看本章目录内容</div>
                    </div>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input class="ls-input" v-model="formData.sort"></el-input>
                </el-form-item>
                <el-form-item label="内容:" v-if="pageType == 1">
                    <editor v-model="formData.content" width="800" height="664"></editor>
                </el-form-item>
                <el-form-item
                    label="上传音频:"
                    prop="content"
                    :rules="[
                        {
                            required: true,
                            message: '请选择上传音频',
                            trigger: 'change'
                        }
                    ]"
                    v-if="pageType == 2"
                >
                    <material-select
                        v-model="formData.content"
                        :type="'audio'"
                        :limit="1"
                        @change="change"
                    ></material-select>
                </el-form-item>
                <el-form-item
                    label="上传视频:"
                    prop="content"
                    :rules="[
                        {
                            required: true,
                            message: '请选择上传视频',
                            trigger: 'change'
                        }
                    ]"
                    v-if="pageType == 3"
                >
                    <material-select
                        v-model="formData.content"
                        :type="'video'"
                        :limit="1"
                        @change="change"
                    ></material-select>
                </el-form-item>
            </el-card>
        </el-form>
        <!-- Main End -->

        <!-- Footer Start -->
        <footer-btns>
            <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
        </footer-btns>
        <!-- Footer End -->
    </div>
</template>

<script lang="ts" setup>
import {
    apiCourseFeeType,
    apiCourseCatalogueAdd,
    apiCourseCatalogueEdit,
    apiCourseCatalogueDetail,
    apiCourseDetail
} from '@/api/course/course'
import { reactive, ref } from 'vue'
import editor from '@/components/editor/index.vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import materialSelect from '@/components/material/picker.vue'
import type { ElForm } from 'element-plus'
// import { useAdmin } from '@/core/hooks/app'

/** Interface Start **/
interface FormDataObj {
    id: number // 目录ID
    courseId?: string | number // 课程ID
    name?: string // 课程名称
    feeType: number | string // 是否免费
    content?: string // 内容 - 图文课程
    cover?: string // 视频课程 封面
    sort?: string | number // 排序
    duration: number //视频时长
}
type FormInstance = InstanceType<typeof ElForm>
const formRef = ref<FormInstance>()
/** Interface End **/

/** Data Start **/
// const { router, route } = useAdmin()
const router = useRouter()
const route = useRoute()

const id: any = route.query.id
const course_id: any = route.query.course_id
const pageType: any = route.query.type
const fee_type = ref<boolean | number>(true)
// 表单数据
const formData = ref<FormDataObj>({
    id: id,
    courseId: course_id,
    name: '',
    content: '',
    cover: '',
    feeType: 1,
    sort: 0,
    duration: 0
})
// 表单规则
const rules = reactive({
    name: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
})
/** Data End **/

/** Methods Start **/

/**
 * @description 获取课程收费类型
 */
const initCourseFeeType = async (): Promise<void> => {
    const res = await apiCourseDetail({ id: course_id })
    fee_type.value = res.feeType
    if (!fee_type.value) formData.value.feeType = 0
}

/**
 * @description 获取课程目录详情
 */
const initCourseCatalogueDetail = async (): Promise<void> => {
    formData.value = await apiCourseCatalogueDetail({ id })
    if (!fee_type.value) formData.value.feeType = 1
}

/**
 * @description 添加课程目录
 */
const handleCourseCatalogueAdd = async (): Promise<void> => {
    await apiCourseCatalogueAdd({ ...formData.value })
    router.back()
}

/**
 * @description 编辑课程目录
 */
const handleCourseCatalogueEdit = async (): Promise<void> => {
    await apiCourseCatalogueEdit({ ...formData.value })
    router.back()
}

//视频音频选择
const change = (path: any, value: any) => {
    formData.value.duration = value[0].duration
}

/**
 * @description 提交数据
 */
const onSubmit = (formEl: FormInstance | undefined): void => {
    if (!formEl) return
    formEl.validate((valid, requiredFields): void => {
        if (valid) {
            if (!id) handleCourseCatalogueAdd()
            else handleCourseCatalogueEdit()
        }
    })
}
/** Methods End **/

/** LifeCycle Start **/
if (id) initCourseCatalogueDetail()
initCourseFeeType()
/** LifeCycle End **/
</script>

<style lang="scss">
.edit {
    .ls-input {
        width: 460px;
    }
}
</style>
